<template>
  <div class="app-container">
    <!-- 任务类型为40，发货单同步详情 -->
    <div v-if="type === 40">
      <div class="mod-details-wrap">
        <div class="mod-details-item mod-details-item-lg">
          <div class="item-label item-label-lg">调用令牌</div>
          <div class="item-info">{{ detailData.accesstoken }}</div>
        </div>
        <div class="mod-details-item mod-details-item-lg">
          <div class="item-label item-label-lg">单据编号</div>
          <div class="item-info">{{ detailData.fbillNo }}</div>
        </div>
        <div class="mod-details-item mod-details-item-lg">
          <div class="item-label item-label-lg">日期</div>
          <div class="item-info">{{ parseTime(detailData.fdate) }}</div>
        </div>
        <div class="mod-details-item mod-details-item-lg">
          <div class="item-label item-label-lg">领料部门</div>
          <div class="item-info">{{ detailData.fdeptId }}</div>
        </div>
      </div>
      <div class="mod-details-wrap">
        <div class="mod-details-item mod-details-item-lg">
          <div class="item-label item-label-lg">领料部门名称</div>
          <div class="item-info">{{ detailData.fdeptName }}</div>
        </div>
        <div class="mod-details-item mod-details-item-lg">
          <div class="item-label item-label-lg">库存组织编码</div>
          <div class="item-info">{{ detailData.fstockorgid }}</div>
        </div>
        <div class="mod-details-item mod-details-item-lg">
          <div class="item-label item-label-lg">库存组织名称</div>
          <div class="item-info">{{ detailData.fstockorgidname }}</div>
        </div>
        <div class="mod-details-item mod-details-item-lg">
          <div class="item-label item-label-lg">单据类型编码</div>
          <div class="item-info">{{ detailData.fbilltypeid }}</div>
        </div>
      </div>
      <div class="mod-details-wrap">
        <div class="mod-details-item mod-details-item-lg">
          <div class="item-label item-label-lg">单据类型名称</div>
          <div class="item-info">{{ detailData.fbilltypeidname }}</div>
        </div>
        <div class="mod-details-item mod-details-item-lg">
          <div class="item-label item-label-lg">库存方向</div>
          <div class="item-info">{{ detailData.fstockdirec }}</div>
        </div>
        <div class="mod-details-item mod-details-item-lg">
          <div class="item-label item-label-lg">库存方向名称</div>
          <div class="item-info">{{ detailData.fstockdirecname }}</div>
        </div>
      </div>
      <div class="mod-details-wrap">
        <div class="mod-details-item">
          <div class="item-label item-label-lg">备注</div>
          <div class="item-info">{{ detailData.fnote }}</div>
        </div>
      </div>
      <el-divider></el-divider>
      <el-table
        :data="taskSendList"
        style="width: 100%"
      >
        <el-table-column label="物料编码" prop="fmaterialid" width="120" />
        <el-table-column label="物料名称" prop="fmaterialidname" width="200" />
        <el-table-column label="护士编码" prop="fnurseid" width="100" />
        <el-table-column label="护士名称" prop="fnurseidname" width="150" />
        <el-table-column label="实发数量数量" prop="fqty" width="120" />
        <el-table-column label="行号" prop="fseq" width="80" />
        <el-table-column label="仓库编码" prop="fstockid" width="120" />
        <el-table-column label="仓库名称" prop="fstockidname" width="120" />
        <el-table-column label="仓位" prop="fstocklocid" width="100" />
        <el-table-column label="批号" prop="flot" width="100" />
        <el-table-column label="开单医生代码" prop="f_UN_Text6" width="120" />
        <el-table-column label="开单医生" prop="f_UN_Text2" width="100" />
        <el-table-column label="HMS中单据编号" prop="f_UN_Text4" width="130" />
        <el-table-column label="HMS中单据类型" prop="f_UN_Text5" width="130" />
        <el-table-column label="操作医生代码" prop="f_UN_Text7" width="120" />
        <el-table-column label="操作医生" prop="f_UN_Text3" width="100" />
        <el-table-column label="源单单号" prop="f_UN_Text8" width="200" />
        <el-table-column label="源单行号" prop="f_UN_Text9" width="100" />
        <el-table-column label="备注1" prop="f_UN_Text10" width="100" />
        <el-table-column label="备注2" prop="f_UN_Text11" width="100" />
      </el-table>
      <el-divider></el-divider>
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="请求JSON">
          <el-tag class="pre-tag" type="info"><pre>{{ taskSendJson.reqJson }}</pre></el-tag>
        </el-form-item>
        <el-form-item label="响应JSON">
          <el-tag class="pre-tag" type="info"><pre>{{ taskSendJson.resJson }}</pre></el-tag>
        </el-form-item>
      </el-form>
    </div>
    <!-- 任务类型为50，退货同步详情 -->
    <div v-if="type === 50">
      <el-table
        :data="taskReturnList"
        style="width: 100%"
      >
        <el-table-column label="状态编码" prop="code" width="100" />
        <el-table-column label="消息" prop="message">
          <template slot-scope="scope">
            <pre>{{ scope.row.message }}</pre>
          </template>
        </el-table-column>
        <el-table-column label="实发数量数量" prop="fqty" width="120" />
        <el-table-column label="源单单号" prop="f_UN_Text8" width="200" />
        <el-table-column label="源单行号" prop="f_UN_Text9" width="100" />
        <el-table-column label="调用令牌" prop="accessToken" width="150" />
        <el-table-column label="备注1" prop="f_UN_Text10" width="100" />
        <el-table-column label="备注2" prop="f_UN_Text11" width="100" />
      </el-table>
      <div style="margin-top: 30px;">
        <el-table
          :data="taskReturnJson"
          style="width: 100%"
        >
          <el-table-column label="请求JSON" prop="reqJson">
            <template slot-scope="scope">
              <pre>{{ scope.row.reqJson }}</pre>
            </template>
          </el-table-column>
          <el-table-column label="响应JSON" prop="resJson">
            <template slot-scope="scope">
              <pre>{{ scope.row.resJson }}</pre>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import { getOrderTaskInfo } from "@/api/order/task"

export default {
  name: "TaskDetail",
  data() {
    return {
      // 任务类型
      type: null,
      // 发货单表格数据
      taskSendList: [],
      // 发货单json数据
      taskSendJson: null,
      // 退货单表格数据
      taskReturnList: [],
      // 退货单json数据
      taskReturnJson: null,
      detailData: {
        accesstoken: null,
        fbillNo: null,
        fdate: null,
        fdeptId: null,            // 领料部门编码
        fdeptName: null,          // 领料部门名称
        fstockorgid: null,        // 库存组织编码
        fstockorgidname: null,    // 库存组织名称
        fbilltypeid: null,        // 单据类型编码
        fbilltypeidname: null,    // 单据类型名称
        fstockdirec: null,        // 库存方向
        fstockdirecname: null,    // 库存方向名称
        fnote: null,              // 备注
      },
      loading: false
    };
  },
  created() {
    this.getDetail();
  },
  methods: {
    getDetail() {
      const id = this.$route.params.id;
      this.loading = true;

      getOrderTaskInfo(id).then(resp => {
        this.type = resp.data.type

        if(this.type === 40) {
          this.detailData = resp.data.data
          this.taskSendList = resp.data.data.fentity
          this.taskSendJson = {
            reqJson: resp.data.reqJson,
            resJson: resp.data.resJson
          }
        } else if(this.type === 50) {
          this.taskReturnList = resp.data.reqList
          this.taskReturnJson = resp.data.jsonList
        }
      });
    },
  }
};
</script>

<style lang="scss" scoped>
  .page-pres-title {
    margin-bottom: 15px;
    font-size: 13px;
    color: #3e7e90;
    .title-line {
      margin-left: 5px;
      margin-right: 5px;
    }
  }
  .mod-details-wrap {
    margin-bottom: 10px;
    &:last-child {
      margin-bottom: 0;
    }
    .mod-details-item {
      &:last-child {
        margin-right: 0;
      }
    }
  }
  .mod-details-item {
    overflow: hidden;
    display: inline-block;
    vertical-align: top;
    line-height: 1.769230769230769;
    &.mod-details-item-sm {
      width: 150px;
    }
    &.mod-details-item-md {
      width: 200px;
    }
    &.mod-details-item-lg {
      width: 320px;
    }
    &.mod-details-item-col3 {
      width: 30%;
    }
    .item-label {
      float: left;
      font-size: 12px;
      color: #333;
      font-weight: bold;
      &.item-label-lg {
        width: 85px;
      }
      &.item-label-md {
        width: 60px;
      }
      &.item-label-xl {
        width: 95px;
      }
      &.item-label-5 {
        width: 80px;
      }
    }
    .item-info {
      overflow: hidden;
      font-size: 12px;
      color: #0018a1;
      line-height: 22px;
      &.item-info-error {
        font-weight: bold;
        color: #eb2323;
      }
    }
  }
  .font-warning-color {
    .font-bg {
      background-color: #fdefb6;
    }
  }
  .font-error-color {
    .font-bg {
      background-color: #ed6e6a;
    }
  }
  .font-primary-color {
    .font-bg {
      background-color: transparent;
    }
  }
  pre {
    white-space: pre-wrap;
    word-wrap: break-word;
  }
  .pre-tag {
    height: auto!important;
    width: 100%!important;
  }
</style>
